<template>
	<view class="" style="display: flex; flex-direction: column;">
		<view class="detail" :style="bg">
			<view class="" style="height: 100vw;">
				<Nav bg-color="rgba(0,0,0,0)" >
					<view class="" style="padding: 20rpx;">
					</view>
				</Nav>
			</view>
			
			<view class="info">
				<h2>{{name}}</h2>
				<view class="" style="display: flex; align-items: center;" @click="toPlay">
					<text style="">全部播放</text> <uni-icons type="right" color="#fff" size="12" class="play"></uni-icons>
				</view>
			</view>
			
			<uni-list>
			 	<uni-list-item v-for="item in list" :title="item.name" :note="name" :thumb="cover"
			 	 thumb-size="lg">
					<template v-slot:footer>
						<uni-icons type="star" size="24"></uni-icons>
						<uni-icons type="right" color="#fff" size="12" class="play"></uni-icons>
					</template>
				</uni-list-item>
			</uni-list>
			<view class="bottom" style="height: 320rpx;">
				
			</view>
		</view>
		
		<view class="bottom" style="height: 320rpx; background-color: #560601; position: fixed; bottom: 0; width: 100%;">
			<AudioPlay :list="audioList" ref="audioPlay"></AudioPlay>
		</view>
	</view>
	
	
</template>

<script>
	import AudioPlay from "@/components/audio-play.vue"
	import http from "@/utils/http.js"
	import Nav from "@/components/nav.vue"
	export default{
		data(){
			return {
				bg: {},
				name: '',
				list: [],
				cover: '',
				audioList: []
			}
		},
		components: {Nav, AudioPlay},
		onLoad(p) {
			// 到本页关闭悬浮窗
			if(getApp().globalData.sphere){
				getApp().globalData.sphere.hide()
			}
			
			this.bg = {
				'background-image': 'linear-gradient(180deg, transparent, transparent, #fff), url('+ p.cover +')'
			}
			this.name = p.name
			this.cover = p.cover
			http.get('/album/'+p.name).then(r => {
				this.list = r.data
			})
		},
		methods: {
			toContent(chapter_id){
				let url, opend;
				switch(this.info.type) {
					case 'txt':
					url = "/pages/document/read/txt?id=" + this.info.id + "&chapter_id=" + chapter_id + "&page_count=" + this.info.page_count;
					opend = () => {}
					break;
					
					case 'pdf':
					url = "/pages/document/read/image?index=" + chapter_id
					opend = (res) => {
						res.eventChannel.emit('init', this.images)
					}
				}
				uni.navigateTo({
					url,
					success: opend
				})
			},
			toPlay(){
				// const data = {
				// 	list: this.list,
				// 	name: this.name
				// }
				// uni.navigateTo({
				// 	url: "/pages/music/play",
				// 	success(res) {
				// 		res.eventChannel.emit('init', data)
				// 	}
				// })
				this.audioList = this.list.map(item => {
					return {
						title: item.name,
						src: item.file,
						cover: item.cover,
						albumName: this.name
					}
				})
				this.$refs.audioPlay.play(this.audioList)
			}
		},
		onUnload() {
			// 开启悬浮窗
			if(getApp().globalData.sphere && this.$refs.audioPlay.playing){
				getApp().globalData.sphere.show()
			}
		}
	}
</script>

<style scoped>
	.detail{
		height: 120vw;
		background-size: cover;
		background-position: center;
		
	}
	.play{
		background-color: black; width: 20px; height: 20px; border-radius: 50%;display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 30rpx;
	}
	/deep/.uni-list-item__container{
		align-items: center;
	}
	/deep/.uni-list, /deep/.uni-list-item{
		background-color: transparent;
	}
	.title-bar{
		background-color: #fff;
		height: 70rpx;
		border-top-left-radius: 50rpx;
		border-top-right-radius: 50rpx;
		display: flex;
		justify-content: space-around;
		align-items: flex-end;
		font-size: 30rpx;
	}
	.info{
		padding: 0 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.nav{
		height: 100rpx;
		background-color: #fff;
		border-top: 1rpx solid #999;
		position: fixed;
		bottom: 0;
		width: 690rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10rpx 30rpx;
	}
</style>